<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/dialog.css">
</head>

<body>
    <div class="dialog" id="box">
        <div class="dialog-title" id="drop">
            <span>注册信息（可以拖曳）</span>
            <div class="dialog-close" id="close">×</div>
        </div>
        <div class="dialog-body">
        </div>
    </div>
    <script>
        var box = document.querySelector('.dialog');
        var drop = box.querySelector('.dialog-title');
        drop.children[1].addEventListener('click', function() {
            this.parentNode.parentNode.style.display = 'none';
        })
        box.children[0].addEventListener('mousedown', function(e) {
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            document.addEventListener('mousemove', move)

            function move(e) {
                box.style.left = e.pageX - x + 'px';
                box.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function(e) {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>
</body>

</html>